<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-09-26 15:29:16
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-04-18 11:10:55
 * @Description: 角色详情
 -->
<template>
  <fks-dialog
    :visible.sync="show"
    :append-to-body="true"
    width="960px"
    destroy-on-close
    :title="title"
    @close="close"
  >
    <div slot="title">
      <i
        v-if="form.operate == 'add'"
        class="fks-icon-plus"
      />
      <i
        v-if="form.operate == 'edit'"
        class="fks-icon-edit"
      />
      <i
        v-if="form.operate == 'view'"
        class="fks-icon-view"
      />
      {{ title }}
    </div>
    <fks-form
      ref="form"
      :model="form"
      label-width="86px"
      status-icon
    >
      <fks-form-item
        :span="12"
        lead
        :label="LANG.ROLE_NAME"
        required
        prop="name"
      >
        <fks-input
          v-model="form.name"
          auto-complete="off"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        :label="LANG.ROLE_CODE"
        required
        prop="code"
      >
        <fks-input
          v-model="form.code"
          auto-complete="off"
          maxlength="50"
          :disabled="form.operate != 'add'"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        v-if="portalType && portal.type == portalType[0].code && multiPortal"
        :span="12"
        lead
        :label="LANG.COMMON_ROLE"
        prop="isGeneral"
      >
        <fks-switch
          v-model="form.isGeneral"
          @change="closeSwitch()"
        />
      </fks-form-item>
      <fks-form-item
        v-if="form.isGeneral && portalType && portal.type == portalType[0].code"
        :label="LANG.ROLE_TYPE"
        :span="12"
        prop="type"
      >
        <fks-select
          v-model="form.type"
          clearable
          :placeholder="LANG.SELECT_HOLDER"
          class="select"
        >
          <fks-option
            v-for="(item, index) in portalType"
            :key="Number(item.code)"
            :label="item[$lang]"
            :value="Number(item.code)"
            :disabled="index == 0"
          />
        </fks-select>
      </fks-form-item>
      <fks-form-item
        :label="LANG.REMARK"
        prop="remark"
      >
        <fks-input
          v-model="form.remark"
          type="textarea"
          auto-complete="off"
          maxlength="255"
          show-word-limit
        />
      </fks-form-item>
    </fks-form>
    <template
      slot="footer"
      style="text-align: right"
    >
      <!-- <fks-button @click="close" type="primary" plain>
          {{ LANG.CANCEL }}
        </fks-button> -->
      <fks-button
        type="primary"
        icon="fks-icon-check"
        @click="submit"
      >
        {{ LANG.SAVE }}
      </fks-button>
    </template>
  </fks-dialog>
</template>

<script type="text/ecmascript-6">
import * as Auth from '../api'
import { ENUM } from '@/store/State/stateTypes'
export default {
  props: {
    data: {
      default() {
        return {
          name: '',
          code: '',
          remark: ''
        }
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: this.visible,
      form: Object.assign({ name: '', code: '', remark: '' }, this.data)
    }
  },

  computed: {
    title() {
      switch (this.form.operate) {
        case 'add':
          return this.LANG.ADD
        case 'view':
          return this.LANG.VIEW
        default:
          return this.LANG.EDIT
      }
    },
    portal() {
      return this.$store.state.portal
    },
    portalId() {
      return this.$store.state.portal.id
    },
    portalType() {
      return this.$store.state[ENUM].portalType
    },
    multiPortal() {
      return this.$store.getters.multiPortal
    },
    operate() {
      return this.form.operate
    }
  },
  watch: {
    data() {
      this.form = Object.assign({ name: '', code: '', remark: '' }, this.data)
    },
    visible() {
      this.show = this.visible
    }
  },
  methods: {
    /**
     * @description: 角色新增表单提交
     * @param {String} formName
     * @return: void
     */
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let action = 'saveRole'
          if (this.form.operate == 'add') {
            action = 'addRole'
            this.form.portalId = this.portal.id
          }
          if (!this.multiPortal) {
            this.form.type = ''
          }
          Auth[action](this.form)
            .then((res) => {
              if (res.status) {
                if (this.form.operate == 'add') {
                  this.$message.success(this.LANG.ADD_SUCCESS)
                } else {
                  this.$message.success(this.LANG.EDIT_SUCCESS)
                }
                this.$parent.getRoles() // 通知列表页面刷新列表数据
                this.close()
              }
            })
            .catch(() => {})
        } else {
          console.log('出现未知错误！！')
          return false
        }
      })
    },
    close() {
      this.show = false
      this.$refs.form.resetFields()
      this.$emit('update:visible', this.show)
    },
    closeSwitch() {
      if (this.form.isGeneral == false) {
        this.form.type = Number(this.portalType[0].code) || this.portal.type
      } else {
        this.form.type = Number(this.portalType[1].code)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.select {
  width: 100%;
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>